<template>
    <div class="count">
        <header>
            <dl>
                <dd>
                    <img src="~assets/img/car/star.png" alt="">
                </dd>
                <dd>
                    <h3>
                        赚取积分
                    </h3>
                </dd>
                <dd>
                    <p>
                        分享文章，赚取积分
                    </p>
                </dd>
            </dl>
        </header>
        <ul>
            <li v-for="item in list" @click="locationHref('/home/main/article?id=' + item.id)">
                <img :src="item.img" alt="">
                <dl>
                    <dt>
                        <h3>{{item.title | len12}}</h3>
                    </dt>
                    <dd>
                        <p>
                            <span>{{item.info | len50}} </span>
                            <span>详细>></span>
                            <i>+{{item.integral}}积分</i>
                        </p>
                    </dd>
                </dl>
            </li>
        </ul> 
    </div>
</template>

<script>
    export default {
        name:'count',

        data() {
            return {
                list: [],
                banner: [],
                demoEvents: []
            }
        },

        components:{
            
        },

        mounted() {     
            this.axios.get('article').then(data => {
                if (data.status == 200) {
                    this.list = data.data;
                } else {
                    this.$toast('服务器处理异常，请稍后再试');
                }
            })
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../../plugins/assets/css/flex.less';
    @import '../../../assets/css/car.less';
    .count {
        background: url('../../../assets/img/car/car-back.png') 0 0 no-repeat;
        background-size: cover;
        min-height: 100vh;
        header {
            position: relative;
            padding: .4rem;
            dl {
                position: relative;
                z-index: 2;
                text-align: center;
                color: #fff;
                img {
                    width: .7rem;
                }
                dd {
                    margin-bottom: .3rem;
                    h3 {
                        font-size: .4rem;
                    }
                    p {
                        color: rgba(255,255,255,.8);
                        font-size: .24rem;
                    }
                }
            }
        }
        ul {
            max-height: 65vh;
            overflow: auto;
            padding: .4rem;
            // background:#fff;
            li {
                .flex-between;
                color: #fff;
                padding: .3rem 0;
                // border-bottom: 1px solid #1D1F23;
                border-bottom: 1px solid #fff;
                img {
                    width: 1.2rem;
                    height: 1.2rem;
                }
                dl {
                    width: 80%;
                    font-size: .22rem;
                    h3 {
                        font-size: .3rem;
                        margin-bottom: .2rem;
                    }
                    dd {
                        overflow: hidden;
                        p {
                            font-size: .22rem;
                            // color: #646464;
                            float: left;
                            line-height: 1.5;
                        }
                        i {
                            .box-sizing;
                            margin-top: .05rem;
                            float: right;
                            padding: .02rem .08rem;
                            color: @blue;
                            border:1px solid @blue;
                            .bor(5px);
                        }
                    }
                }
            }
        }
    }
</style>